<template>
  <div>
    <UserCenterTab selected="Preselect"/>
    <h1 style="text-align: center; padding: 50px;" v-text='"Expert" === type ? "专家预选列表" : "设计团队预选列表"'></h1>
    <div v-if="$store.state.preselectResults.data.length" style="padding-bottom: 20px;">
      <div>
        <div class="drag-switch-wrapper">
          <div class="drag-switch-wrapper">拖拽排序
            <el-switch v-model="drag" active-color="#4C93CF"/>
          </div>
        </div>
        <ExpertsBox v-if='"Expert" === type' data-set-type="Preselect" :drag="drag"/>
        <TeamsBox v-if='"Team" === type' data-set-type="Preselect" :drag="drag"/>
        <div class="button-wrapper">
          <el-button type="myBlue" @click="submitIntroduction" class="logout-button">生成简介</el-button>
          <el-button v-if="'Expert' === type" type="myBlue" @click="submitExpert" class="logout-button">生成预选</el-button>
        </div>
      </div>
    </div>
    <div v-else class="noDataTips" v-text='"Expert" === type ? "没有预选的专家" : "没有预选的设计团队"'></div>
  </div>
</template>

<script>
import UserCenterTab from "@/components/UserCenter/UserCenterTab";
import ExpertsBox from "@/components/ExpertsBox";
import TeamsBox from "@/components/TeamsBox";

export default {
  name: "Preselect",
  components: {
    UserCenterTab,
    ExpertsBox,
    TeamsBox,
  },
  data() {
    return {drag: !1};
  },
  created() {
    this.$store.commit("getAllPreselects", this.type);
  },
  watch: {
    type() {
      this.$store.commit("getAllPreselects", this.type);
    },
  },
  computed: {
    type() {
      return this.$route.params.type;
    },
  },
  methods: {
    dragSwitchChange() {
    },
    submitExpert() {
      const url = "./api/historyResult/generate"
      window.open(url, "_blank")
      this.$router.go(0)
    },
    submitIntroduction() {
      let url = "./api/"
      if ("Expert" === this.type) {
        url += "expert"
      } else if("Team" === this.type) {
        url += "team"
      }
      url += "/introduction"
      window.open(url, "_blank");
    },
  },
}
</script>

<style scoped>
.drag-switch-wrapper {
  width: 1240px;
  text-align: right;
  margin: 0 auto;
  padding: 4px;
  font-size: 18px
}

.noDataTips {
  text-align: center;
  padding: 50px;
  font-size: 30px
}

.button-wrapper {
  text-align: center;
  margin: 15px auto
}

</style>